CSS लॉजिकल प्रॉपर्टीज लेव्हल 2: वर्धित रायटिंग मोड सपोर्टसह खऱ्या अर्थाने ग्लोबल वेब तयार करणे

अनेक दशकांपासून, वेब डेव्हलपर्सनी भौतिक जगावर आधारित शब्दसंग्रह वापरून लेआउट तयार केले आहेत: टॉप, बॉटम, लेफ्ट, आणि राइट. आपण margin-left, padding-top, आणि border-right सेट करतो. हे मानसिक मॉडेल आपल्यासाठी तेव्हा चांगले काम करत होते जेव्हा वेब प्रामुख्याने डावीकडून-उजवीकडे, वरून-खाली या माध्यमापुरते मर्यादित होते. तथापि, वेब जागतिक आहे. हे सर्व भाषा आणि संस्कृतींसाठी एक व्यासपीठ आहे, ज्यापैकी अनेक या सोप्या दिशात्मक प्रवाहाचे पालन करत नाहीत.

अरबी आणि हिब्रू सारख्या भाषा उजवीकडून-डावीकडे लिहिल्या जातात. पारंपारिक जपानी आणि चायनीज भाषा उभ्या, वरून-खाली आणि उजवीकडून-डावीकडे लिहिल्या जाऊ शकतात. या लेखन प्रणालींवर भौतिक, डावीकडून-उजवीकडे CSS मॉडेल लादल्याने लेआउट तुटतात, वापरकर्त्याचा अनुभव निराशाजनक होतो आणि कोड ओव्हरराइड्सचा डोंगर उभा राहतो. इथेच CSS लॉजिकल प्रॉपर्टीज आणि व्हॅल्यूज येतात, जे भौतिक दिशांपासून फ्लो-रिलेटिव्ह, लॉजिकल दिशांकडे एक मूलभूत बदल दर्शवतात. लेव्हल 1 ने पाया घातला असला तरी, CSS लॉजिकल प्रॉपर्टीज लेव्हल 2 हे चित्र पूर्ण करते, आणि आपल्याला खऱ्या अर्थाने सार्वत्रिक, रायटिंग-मोड-अवेअर युझर इंटरफेस तयार करण्यासाठी आवश्यक साधने पुरवते.

हे सर्वसमावेशक मार्गदर्शक तुम्हाला लेव्हल 2 द्वारे आणलेल्या सुधारणांचा सखोल आढावा देईल. आपण मुख्य संकल्पनांच्या उजळणीने सुरुवात करू, नंतर नवीन प्रॉपर्टीज आणि व्हॅल्यूजचा शोध घेऊ जे त्रुटी दूर करतात, आणि शेवटी, कोणत्याही रायटिंग मोडमध्ये सहजपणे जुळवून घेणारा एक कंपोनेंट तयार करून हे सर्व प्रत्यक्षात आणू. CSS लेआउटबद्दल विचार करण्याची तुमची पद्धत कायमची बदलण्यासाठी सज्ज व्हा.

एक जलद उजळणी: लॉजिकल प्रॉपर्टीजच्या मूळ संकल्पना (लेव्हल 1)

लेव्हल 2 मधील नवीन गोष्टी समजून घेण्यापूर्वी, लेव्हल 1 ने घातलेल्या पायाची आपल्याला ठोस समज असणे आवश्यक आहे. संपूर्ण प्रणाली दोन मुख्य संकल्पनांवर आधारित आहे: रायटिंग मोड आणि त्यातून निर्माण होणारे ब्लॉक आणि इनलाइन ॲक्सिस.

चार रायटिंग मोड्स

writing-mode ही सीएसएस प्रॉपर्टी मजकूर कोणत्या दिशेने मांडला जाईल हे ठरवते. आपण अनेकदा डीफॉल्ट गृहीत धरतो, परंतु अशी अनेक व्हॅल्यूज आहेत जी पृष्ठावरील सामग्रीचा प्रवाह मूलभूतपणे बदलतात:

• horizontal-tb: बहुतेक पाश्चात्य भाषांसाठी हे डीफॉल्ट आहे. मजकूर आडवा (इनलाइन ॲक्सिस) डावीकडून-उजवीकडे (किंवा दिशेनुसार उजवीकडून-डावीकडे) वाहतो, आणि ओळी वरून-खाली (ब्लॉक ॲक्सिस) रचल्या जातात.
• vertical-rl: पारंपारिक पूर्व आशियाई टायपोग्राफीसाठी (उदा. जपानी, चायनीज) वापरले जाते. मजकूर उभा वरून-खाली (इनलाइन ॲक्सिस) वाहतो, आणि ओळी उजवीकडून-डावीकडे (ब्लॉक ॲक्सिस) रचल्या जातात.
• vertical-lr: वरीलप्रमाणेच, परंतु ओळी डावीकडून-उजवीकडे (ब्लॉक ॲक्सिस) रचल्या जातात. कमी सामान्य, परंतु मंगोलियन लिपीसारख्या काही संदर्भांमध्ये वापरले जाते.
• sidelong-rl / sidelong-lr: हे विशिष्ट वापरासाठी आहेत जिथे तुम्हाला ग्लिफ्स त्यांच्या बाजूला मांडायचे आहेत. सामान्य वेब सामग्रीमध्ये हे कमी सामान्य आहेत.

महत्त्वाची संकल्पना: ब्लॉक विरुद्ध इनलाइन ॲक्सिस

ही समजून घेण्यासाठी सर्वात महत्त्वाची संकल्पना आहे. लॉजिकल जगात, आपण "उभे" आणि "आडवे" विचार करणे थांबवतो आणि ब्लॉक आणि इनलाइन ॲक्सिसच्या संदर्भात विचार करू लागतो. त्यांचे ओरिएंटेशन पूर्णपणे writing-mode वर अवलंबून असते.

• इनलाइन ॲक्सिस ही दिशा आहे ज्यामध्ये मजकूर एका ओळीत वाहतो.
• ब्लॉक ॲक्सिस ही दिशा आहे ज्यामध्ये नवीन ओळी रचल्या जातात.

हे कसे कार्य करते ते पाहूया:

• मानक इंग्रजीमध्ये (writing-mode: horizontal-tb): इनलाइन ॲक्सिस आडवा चालतो, आणि ब्लॉक ॲक्सिस उभा चालतो.
• पारंपारिक जपानीमध्ये (writing-mode: vertical-rl): इनलाइन ॲक्सिस उभा चालतो, आणि ब्लॉक ॲक्सिस आडवा चालतो.

हे ॲक्सिस बदलू शकत असल्यामुळे, width आणि height सारख्या प्रॉपर्टीज संदिग्ध होतात. width म्हणजे आडव्या ॲक्सिसवरील आकार की इनलाइन ॲक्सिसवरील? लॉजिकल प्रॉपर्टीज ही संदिग्धता दूर करतात. आता आपल्याकडे प्रत्येक ॲक्सिससाठी स्टार्ट आणि एंड आहेत:

• block-start: इंग्रजीमध्ये "टॉप", परंतु उभ्या जपानीमध्ये "उजवीकडे".
• block-end: इंग्रजीमध्ये "बॉटम", परंतु उभ्या जपानीमध्ये "डावीकडे".
• inline-start: इंग्रजीमध्ये "डावीकडे", परंतु उभ्या जपानीमध्ये "टॉप".
• inline-end: इंग्रजीमध्ये "उजवीकडे", परंतु उभ्या जपानीमध्ये "बॉटम".

फिजिकल ते लॉजिकल प्रॉपर्टीजचे मॅपिंग (लेव्हल 1)

लेव्हल 1 ने फिजिकल ते लॉजिकल प्रॉपर्टीजपर्यंत मॅपिंगचा एक सर्वसमावेशक संच सादर केला. येथे काही प्रमुख उदाहरणे आहेत:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (पोझिशनिंगसाठी) → inset-inline-start / inset-inline-end
• top / bottom (पोझिशनिंगसाठी) → inset-block-start / inset-block-end

लेव्हल 1 ने आपल्याला margin-inline (स्टार्ट आणि एंडसाठी) आणि padding-block (स्टार्ट आणि एंडसाठी) सारखे उपयुक्त शॉर्टहँड्स देखील दिले.

लेव्हल 2 मध्ये आपले स्वागत आहे: नवीन काय आहे आणि ते महत्त्वाचे का आहे

जरी लेव्हल 1 एक मोठे पाऊल होते, तरीही त्यात काही लक्षणीय त्रुटी होत्या. float, clear, आणि resize सारख्या काही मूलभूत CSS प्रॉपर्टीजना कोणतेही लॉजिकल समकक्ष नव्हते. शिवाय, border-radius सारख्या प्रॉपर्टीजला लॉजिकली नियंत्रित करता येत नव्हते, ज्यामुळे डेव्हलपर्सना सूक्ष्म स्टायलिंगसाठी फिजिकल प्रॉपर्टीजवर अवलंबून राहावे लागत होते. याचा अर्थ असा होता की तुम्ही लॉजिकल प्रॉपर्टीजसह 90% लेआउट तयार करू शकत होता, परंतु तरीही वेगवेगळ्या रायटिंग मोड्ससाठी फिजिकल ओव्हरराइड्सची आवश्यकता भासत होती, ज्यामुळे मूळ उद्देश अंशतः निष्फळ ठरत होता.

CSS लॉजिकल प्रॉपर्टीज लेव्हल 2 थेट या उणिवा दूर करते. हे एक नवीन प्रणाली सादर करण्याबद्दल नाही, तर लेव्हल 1 मध्ये सुरू केलेली प्रणाली पूर्ण करण्याबद्दल आहे. हे दोन प्राथमिक मार्गांनी साध्य करते:

1. जुन्या CSS वैशिष्ट्यांसाठी नवीन लॉजिकल प्रॉपर्टीज आणि व्हॅल्यूज सादर करणे जे मूळतः भौतिक होते (जसे की float).
2. जटिल शॉर्टहँड्ससाठी लॉजिकल प्रॉपर्टी मॅपिंग जोडणे ज्याकडे पूर्वी दुर्लक्ष केले गेले होते (जसे की border-radius).

लेव्हल 2 सह, पूर्णपणे फ्लो-रिलेटिव्ह स्टाइलिंग प्रणालीची दृष्टी जवळजवळ पूर्ण झाली आहे, ज्यामुळे आपल्याला हॅक्स किंवा ओव्हरराइड्सशिवाय, सर्वत्र, प्रत्येकासाठी काम करणारे जटिल, सुंदर आणि मजबूत कंपोनंट्स तयार करता येतात.

सखोल आढावा: लेव्हल 2 मधील नवीन लॉजिकल व्हॅल्यूज आणि प्रॉपर्टीज

चला आपल्या डेव्हलपर टूलकिटमध्ये लेव्हल 2 ने आणलेल्या सर्वात प्रभावी नवीन गोष्टींचा शोध घेऊया. ही अशी साधने आहेत जी त्रुटी भरून काढतात आणि खऱ्या अर्थाने सार्वत्रिक कंपोनेंट डिझाइनला सक्षम करतात.

Float आणि Clear: लॉजिकल क्रांती

float प्रॉपर्टी अनेक वर्षांपासून CSS लेआउटचा आधारस्तंभ आहे, परंतु तिची left आणि right ही व्हॅल्यूज भौतिक दिशेची व्याख्या आहेत. जर तुम्ही इंग्रजीमधील एका परिच्छेदाच्या left ला एक इमेज फ्लोट केली, तर ती योग्य दिसते. पण जर तुम्ही अरबीसाठी डॉक्युमेंटची दिशा उजवीकडून-डावीकडे (RTL) बदलली, तर इमेज आता मजकूर ब्लॉकच्या "चुकीच्या" बाजूला असते. ती उजवीकडे असायला हवी, जी ओळीची सुरुवात आहे.

लेव्हल 2 float प्रॉपर्टीसाठी दोन नवीन, लॉजिकल कीवर्ड सादर करते:

• float: inline-start; हे एका एलिमेंटला इनलाइन दिशेच्या सुरुवातीला फ्लोट करते. LTR भाषांमध्ये, हे डावीकडे आहे. RTL भाषांमध्ये, ते उजवीकडे आहे. vertical-rl रायटिंग मोडमध्ये, ते वर आहे.
• float: inline-end; हे एका एलिमेंटला इनलाइन दिशेच्या शेवटी फ्लोट करते. LTR मध्ये, हे उजवीकडे आहे. RTL मध्ये, ते डावीकडे आहे. vertical-rl मध्ये, ते खाली आहे.

त्याचप्रमाणे, clear प्रॉपर्टी, जी फ्लोट केलेल्या घटकांभोवती सामग्रीच्या रॅपिंगवर नियंत्रण ठेवण्यासाठी वापरली जाते, तिला तिचे लॉजिकल समकक्ष मिळतात:

• clear: inline-start; इनलाइन-स्टार्ट बाजूला फ्लोट्स क्लिअर करते.
• clear: inline-end; इनलाइन-एंड बाजूला फ्लोट्स क्लिअर करते.

हा एक गेम-चेंजर आहे. आपण आता क्लासिक इमेज-विथ-टेक्स्ट-रॅप लेआउट्स तयार करू शकता जे कोणत्याही भाषेच्या दिशेनुसार एकाही अतिरिक्त CSS ओळीशिवाय आपोआप जुळवून घेतात.

लॉजिकल Resize सह वर्धित नियंत्रण

resize प्रॉपर्टी, जी सामान्यतः textarea वर वापरली जाते, वापरकर्त्यांना एलिमेंटचा आकार बदलण्याची परवानगी देते. तिची पारंपारिक व्हॅल्यूज horizontal, vertical, आणि both आहेत. पण उभ्या रायटिंग मोडमध्ये "horizontal" चा अर्थ काय? याचा अर्थ अजूनही भौतिक आडव्या ॲक्सिसवर आकार बदलणे आहे, जे वापरकर्त्याचा किंवा डिझायनरचा हेतू नसू शकतो. वापरकर्त्याला कदाचित ओळी लांब किंवा लहान करण्यासाठी एलिमेंटचा आकार त्याच्या इनलाइन ॲक्सिसवर बदलायचा असेल.

लेव्हल 2 resize साठी लॉजिकल व्हॅल्यूज सादर करते:

• resize: inline; इनलाइन ॲक्सिसवर आकार बदलण्याची परवानगी देते.
• resize: block; ब्लॉक ॲक्सिसवर आकार बदलण्याची परवानगी देते.

इंग्रजीमध्ये textarea वर resize: block; वापरल्याने वापरकर्त्याला ते उंच करता येते. उभ्या रायटिंग मोडमध्ये ते वापरल्याने वापरकर्त्याला ते रुंद (जी ब्लॉक दिशा आहे) करता येते. ते आपोआप काम करते.

`caption-side`: टेबल कॅप्शनसाठी लॉजिकल पोझिशनिंग

caption-side प्रॉपर्टी टेबलच्या caption चे स्थान ठरवते. जुन्या व्हॅल्यूज top आणि bottom होत्या. पुन्हा, ह्या भौतिक आहेत. जर डिझायनरचा हेतू टेबलच्या सामग्रीच्या "आधी" कॅप्शन ठेवण्याचा असेल, तर top आडव्या रायटिंग मोड्ससाठी काम करते. परंतु vertical-rl मोडमध्ये, ब्लॉक प्रवाहाची "सुरुवात" उजवीकडे आहे, वर नाही.

लेव्हल 2 लॉजिकल उपाय प्रदान करते:

• caption-side: block-start; कॅप्शनला ब्लॉक प्रवाहाच्या सुरुवातीला ठेवते.
• caption-side: block-end; कॅप्शनला ब्लॉक प्रवाहाच्या शेवटी ठेवते.

`text-align`: एक मूलभूत लॉजिकल व्हॅल्यू

जरी text-align साठी start आणि end व्हॅल्यूज काही काळापासून वापरात आहेत, तरी त्या लॉजिकल प्रॉपर्टीजच्या तत्त्वज्ञानाचा एक मुख्य भाग आहेत आणि त्यांना पुन्हा अधोरेखित करणे महत्त्वाचे आहे. text-align: left; वापरणे ही एक सामान्य चूक आहे ज्यामुळे RTL भाषांमध्ये त्वरित लेआउट समस्या निर्माण होतात. योग्य, आधुनिक दृष्टिकोन म्हणजे नेहमी वापरणे:

• text-align: start; मजकूराला इनलाइन दिशेच्या सुरुवातीला संरेखित करते.
• text-align: end; मजकूराला इनलाइन दिशेच्या शेवटी संरेखित करते.

लेव्हल 2 चे मुकुटमणी: लॉजिकल `border-radius`

कदाचित लेव्हल 2 मधील सर्वात लक्षणीय आणि शक्तिशाली भर म्हणजे बॉर्डर रेडिआयला लॉजिकली नियंत्रित करण्यासाठी प्रॉपर्टीजचा संच. पूर्वी, जर तुम्हाला एखाद्या कार्डला फक्त "वरच्या" बाजूला गोलाकार कोपरे हवे असतील, तर तुम्ही border-top-left-radius आणि border-top-right-radius वापरायचा. हे उभ्या रायटिंग मोडमध्ये पूर्णपणे अयशस्वी ठरते, जिथे "वरचे" कोपरे आता start-start आणि end-start कोपरे आहेत.

लेव्हल 2 चार नवीन लाँगहँड प्रॉपर्टीज सादर करते जे एका एलिमेंटच्या चार कोपऱ्यांना फ्लो-रिलेटिव्ह पद्धतीने मॅप करतात. नामकरण पद्धत border-[block-edge]-[inline-edge]-radius आहे.

• border-start-start-radius: तो कोपरा जिथे ब्लॉक-स्टार्ट आणि इनलाइन-स्टार्ट बाजू मिळतात.
• border-start-end-radius: तो कोपरा जिथे ब्लॉक-स्टार्ट आणि इनलाइन-एंड बाजू मिळतात.
• border-end-start-radius: तो कोपरा जिथे ब्लॉक-एंड आणि इनलाइन-स्टार्ट बाजू मिळतात.
• border-end-end-radius: तो कोपरा जिथे ब्लॉक-एंड आणि इनलाइन-एंड बाजू मिळतात.

हे सुरुवातीला व्हिज्युअलाइझ करणे अवघड असू शकते, म्हणून चला वेगवेगळ्या रायटिंग मोड्ससाठी ते मॅप करूया:

`writing-mode: horizontal-tb` मध्ये `border-radius` मॅपिंग (उदा. इंग्रजी)

• border-start-start-radius हे top-left-radius शी मॅप होते.
• border-start-end-radius हे top-right-radius शी मॅप होते.
• border-end-start-radius हे bottom-left-radius शी मॅप होते.
• border-end-end-radius हे bottom-right-radius शी मॅप होते.

`dir="rtl"` सह `writing-mode: horizontal-tb` मध्ये `border-radius` मॅपिंग (उदा. अरबी)

येथे, इनलाइन दिशा उलटली आहे.

• border-start-start-radius हे top-right-radius शी मॅप होते. (ब्लॉक-स्टार्ट म्हणजे टॉप, इनलाइन-स्टार्ट म्हणजे उजवीकडे).
• border-start-end-radius हे top-left-radius शी मॅप होते.
• border-end-start-radius हे bottom-right-radius शी मॅप होते.
• border-end-end-radius हे bottom-left-radius शी मॅप होते.

`writing-mode: vertical-rl` मध्ये `border-radius` मॅपिंग (उदा. जपानी)

येथे, दोन्ही ॲक्सिस फिरवले आहेत.

• border-start-start-radius हे top-right-radius शी मॅप होते. (ब्लॉक-स्टार्ट म्हणजे उजवीकडे, इनलाइन-स्टार्ट म्हणजे टॉप).
• border-start-end-radius हे bottom-right-radius शी मॅप होते.
• border-end-start-radius हे top-left-radius शी मॅप होते.
• border-end-end-radius हे bottom-left-radius शी मॅप होते.

या नवीन प्रॉपर्टीज वापरून, तुम्ही कोपऱ्यांचे रेडिअस परिभाषित करू शकता जे सामग्रीच्या प्रवाहाशी अर्थपूर्णपणे जोडलेले आहेत, भौतिक स्क्रीनशी नाही. एक "स्टार्ट-स्टार्ट" कोपरा नेहमीच योग्य कोपरा असेल, भाषा किंवा मजकूराची दिशा काहीही असो.

व्यावहारिक अंमलबजावणी: एक ग्लोबल-रेडी कंपोनेंट तयार करणे

सिद्धांत उत्तम आहे, पण हे प्रत्यक्षात कसे कार्य करते ते पाहूया. आपण एक साधे प्रोफाइल कार्ड कंपोनेंट तयार करू, प्रथम जुन्या फिजिकल प्रॉपर्टीज वापरून, आणि नंतर ते लेव्हल 1 आणि लेव्हल 2 दोन्हीमधील आधुनिक लॉजिकल प्रॉपर्टीज वापरण्यासाठी रिफॅक्टर करू.

कार्डमध्ये एका बाजूला फ्लोट केलेली इमेज, एक शीर्षक, काही मजकूर, आणि एक सजावटीची बॉर्डर आणि गोलाकार कोपरे असतील.

"जुनी" पद्धत: एक ठिसूळ, फिजिकल-प्रॉपर्टी कार्ड

काही वर्षांपूर्वी आपण हे कार्ड कसे स्टाईल केले असते ते येथे आहे:

/* --- CSS (फिजिकल प्रॉपर्टीज) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

मानक इंग्रजी LTR संदर्भात, हे ठीक दिसते. पण जर आपण हे dir="rtl" किंवा writing-mode: vertical-rl असलेल्या कंटेनरमध्ये ठेवले, तर लेआउट तुटतो. सजावटीची बॉर्डर चुकीच्या बाजूला आहे, अवतार चुकीच्या बाजूला आहे, मार्जिन चुकीचा आहे, आणि गोलाकार कोपरे चुकीच्या ठिकाणी आहेत.

"नवीन" पद्धत: एक मजबूत, लॉजिकल-प्रॉपर्टी कार्ड

आता, चला त्याच कंपोनेंटला लॉजिकल प्रॉपर्टीज वापरून रिफॅक्टर करूया. आपण लेव्हल 1 आणि लेव्हल 2 मधील नवीन भर या दोन्हींचा लाभ घेऊ.

/* --- CSS (लॉजिकल प्रॉपर्टीज) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` शॉर्टहँड आधीच लॉजिकल आहे! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* लेव्हल 2 ची शक्ती! */

  border-end-start-radius: 8px; /* लेव्हल 2 ची शक्ती! */

}

.logical-card .avatar {

  float: inline-start; /* लेव्हल 2 ची शक्ती! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

चाचणी आणि पडताळणी

या नवीन CSS सह, तुम्ही कंपोनेंटला कोणत्याही कंटेनरमध्ये टाकू शकता आणि ते आपोआप जुळवून घेईल.

• LTR संदर्भात: ते मूळ फिजिकल आवृत्तीसारखेच दिसेल.
• RTL संदर्भात (dir="rtl"): अवतार उजवीकडे फ्लोट होईल, त्याचे मार्जिन डावीकडे असेल, सजावटीची बॉर्डर उजवीकडे असेल, आणि मजकूर स्टार्ट-अलाइंड (उजवीकडे) असेल. गोलाकार कोपरे योग्यरित्या वर-उजवीकडे आणि खाली-उजवीकडे असतील. ते आपोआप काम करते.
• उभ्या संदर्भात (writing-mode: vertical-rl): कार्डची "रुंदी" (आता तिची उभी inline-size) 300px असेल. अवतार "वर" (inline-start) फ्लोट होईल आणि त्याच्या "खाली" (inline-end) मार्जिन असेल. सजावटीची बॉर्डर उजव्या बाजूला (inline-start) असेल, आणि गोलाकार कोपरे वर-उजवीकडे आणि वर-डावीकडे असतील. कंपोनेंटने कोणत्याही मीडिया क्वेरीज किंवा ओव्हरराइड्सशिवाय स्वतःला पूर्णपणे योग्यरित्या पुन्हा ओरिएंट केले आहे.

ब्राउझर सपोर्ट आणि फॉलबॅक्स

हे सर्व विलक्षण वाटते, पण ब्राउझर सपोर्टचे काय? चांगली बातमी अशी आहे की लेव्हल 1 लॉजिकल प्रॉपर्टीजसाठी सर्व आधुनिक ब्राउझरमध्ये उत्कृष्ट सपोर्ट आहे. तुम्ही आज margin-inline-start आणि padding-block सारख्या प्रॉपर्टीज वापरू शकता आणि वापरायलाच हव्यात.

नवीन लेव्हल 2 वैशिष्ट्यांसाठी सपोर्ट वेगाने सुधारत आहे परंतु अद्याप सार्वत्रिक नाही. float, clear, आणि resize साठी लॉजिकल व्हॅल्यूज चांगल्या प्रकारे समर्थित आहेत. लॉजिकल border-radius प्रॉपर्टीज सर्वात नवीन आहेत आणि कदाचित अजूनही फीचर फ्लॅगच्या मागे किंवा अलीकडील ब्राउझर आवृत्त्यांमध्ये असतील. नेहमीप्रमाणे, सर्वात अद्ययावत सुसंगतता डेटासाठी तुम्ही MDN Web Docs किंवा CanIUse.com सारख्या संसाधनांचा सल्ला घ्यावा.

प्रोग्रेसिव्ह एनहान्समेंटसाठी स्ट्रॅटेजी

CSS लवचिक असण्यासाठी डिझाइन केलेले असल्याने, आपण जुन्या ब्राउझरसाठी सहजपणे फॉलबॅक प्रदान करू शकतो. कॅस्केड हे सुनिश्चित करेल की जर ब्राउझरला लॉजिकल प्रॉपर्टी समजत नसेल, तर तो फक्त त्याकडे दुर्लक्ष करेल आणि त्यापूर्वी परिभाषित केलेली फिजिकल प्रॉपर्टी वापरेल.

तुम्ही फॉलबॅक-रेडी CSS कसे लिहू शकता ते येथे आहे:

.card {

  /* जुन्या ब्राउझरसाठी फॉलबॅक */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* आधुनिक लॉजिकल प्रॉपर्टी जी फॉलबॅकला ओव्हरराइड करेल */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

हा दृष्टिकोन प्रत्येकासाठी एक ठोस आधारभूत अनुभव सुनिश्चित करतो आणि आधुनिक ब्राउझरवरील वापरकर्त्यांसाठी वर्धित, अनुकूल लेआउट प्रदान करतो. ज्या प्रकल्पांना एकापेक्षा जास्त रायटिंग मोडला सपोर्ट करण्याची आवश्यकता नाही, त्यांच्यासाठी हे कदाचित अनावश्यक असेल. परंतु कोणत्याही ग्लोबल ॲप्लिकेशन, डिझाइन सिस्टम किंवा थीमसाठी, ही एक मजबूत आणि भविष्य-प्रूफ स्ट्रॅटेजी आहे.

भविष्य लॉजिकल आहे: लेव्हल 2 च्या पलीकडे

भौतिक ते लॉजिकल मानसिकतेतील संक्रमण हे आधुनिक CSS मधील सर्वात महत्त्वाच्या बदलांपैकी एक आहे. हे आपल्या स्टाइलिंग भाषेला विविध, जागतिक वेबच्या वास्तविकतेशी जुळवते. हे आपल्याला ठिसूळ, स्क्रीन-ओरिएंटेड हॅक्सपासून दूर लवचिक, सामग्री-ओरिएंटेड डिझाइनकडे नेते.

अजूनही काही त्रुटी आहेत का? काही आहेत. background-position किंवा ग्रेडियंट्स सारख्या प्रॉपर्टीजसाठी लॉजिकल व्हॅल्यूजवर अजूनही चर्चा सुरू आहे. परंतु लेव्हल 2 च्या प्रकाशनासह, दैनंदिन लेआउट आणि स्टाइलिंगची बहुतांश कामे आता पूर्णपणे लॉजिकल दृष्टिकोन वापरून पूर्ण केली जाऊ शकतात.

डेव्हलपर्ससाठी कृतीची स्पष्ट हाक आहे: लॉजिकल प्रॉपर्टीजला डीफॉल्ट बनवण्यास सुरुवात करा. width ऐवजी inline-size ला तुमची निवड बनवा. डाव्या आणि उजव्या मार्जिन वेगळे सेट करण्याऐवजी margin-inline वापरा. हे केवळ वेगवेगळ्या भाषांना सपोर्ट करण्याबद्दल नाही; हे अधिक चांगले, अधिक लवचिक CSS लिहिण्याबद्दल आहे. लॉजिकल प्रॉपर्टीजसह तयार केलेला कंपोनेंट मूळतः अधिक पुनर्वापर करण्यायोग्य आणि जुळवून घेणारा असतो, मग तो LTR, RTL, किंवा उभ्या लेआउटमध्ये वापरला गेला तरीही. हे फक्त चांगले अभियांत्रिकी आहे.

निष्कर्ष: फ्लोला स्वीकारा

CSS लॉजिकल प्रॉपर्टीज लेव्हल 2 हे केवळ नवीन वैशिष्ट्यांचा संग्रह नाही; ते एका दृष्टीची पूर्तता आहे. ते लेआउट्स तयार करण्यासाठी आवश्यक असलेले अंतिम, महत्त्वाचे तुकडे प्रदान करते जे त्यांच्या सामग्रीच्या नैसर्गिक प्रवाहाचा आदर करतात, तो प्रवाह कोणताही असो. float: inline-start आणि border-start-start-radius सारख्या प्रॉपर्टीजचा स्वीकार करून, आपण आपले कौशल्य केवळ स्क्रीनवर बॉक्स ठेवण्यापासून खऱ्या अर्थाने जागतिक, समावेशक आणि भविष्य-प्रूफ वेब अनुभव डिझाइन करण्यापर्यंत उंचावतो.

पुढच्या वेळी जेव्हा तुम्ही नवीन प्रोजेक्ट सुरू कराल किंवा नवीन कंपोनेंट तयार कराल, तेव्हा margin-left टाइप करण्यापूर्वी थांबा. स्वतःला विचारा, "माझा अर्थ डावीकडे आहे की सुरुवात?" तो छोटासा मानसिक बदल करून, तुम्ही प्रत्येकासाठी, सर्वत्र, अधिक जुळवून घेणाऱ्या आणि प्रवेशयोग्य वेबमध्ये योगदान द्याल.